<template>
  <div class="index">
    <div class="invite-index" :style="{ backgroundImage: 'url(' + $store.state.setting.inviteIndexBg + ')' }">
      <div>
        <img
          v-if="$store.state.invite_index.countdown_text.status === -1"
          src="@/assets/invite/willMarry.png"
          alt=""
        />
        <img
          v-if="$store.state.invite_index.countdown_text.status === 0"
          src="@/assets/invite/doing.png"
          alt=""
        />
        <img
          v-if="$store.state.invite_index.countdown_text.status === 1"
          src="@/assets/invite/growing.png"
          alt=""
        />
      </div>
      <div>
        <img
          v-if="$store.state.invite_index.countdown_text.status != 1"
          src="@/assets/invite/xi.png"
          alt=""
        />
      </div>
      <div>
        <img
          v-if="$store.state.invite_index.countdown_text.status === -1"
          src="@/assets/invite/qingjian.png"
          alt=""
        />
      </div>
      <div>
        <img src="@/assets/invite/heart.png" alt="" />
        <div class="name">
          <span>{{$store.state.setting.husbandName}}</span>
          <span>{{$store.state.setting.wifeName}}</span>
        </div>
        <div class="countdown">{{ $store.state.invite_index.countdown_text.text }}</div>
        <div class="countdown">{{ $store.state.invite_index.countdown_text.countdown }}</div>
        <div class="reply" v-if="$store.state.invite_index.countdown_text.status === -1">
          {{ $store.state.invite_index.invite_state.msg }}
        </div>
      </div>
      <love-button
        v-if="$store.state.invite_index.countdown_text.status === -1"
        :attr_button="attr_button_1"
        class="reply_button"
      ></love-button>
      <bottom-menu :active_menu_nth="active_menu_nth" />
    </div>
    <!--     <iframe style="display: none" ref="video" :class="{video: countdown_text.status === 1 || countdown_text.status === 0}" src="//1255979805.vod2.myqcloud.com/vod-player/1255979805/5285890801882774011/tcplayer/console/vod-player.html?autoplay=false&width=720&height=480"
            frameborder="0" scrolling="no" width="720" height="480" allowfullscreen >
    </iframe> -->
  </div>
</template>

<script>
// @ is an alias to /src
import { BottomMenu, LoveButton, LoveLoading } from "@/components";

export default {
  name: "InviteIndex",
  data() {
    return {
      intval: "",
      is_loading: false,
      attr_button_1: {
        text: "敬启",
        width: "35%",
        color: "red",
      },
      active_menu_nth: [1, 0, 0],
    };
  },
  components: {
    BottomMenu,
    LoveButton,
    LoveLoading,
  },
  mounted() {
    let that = this;
    let i = 1;
    let intval = setInterval(function () {
      if (i > 10) {
        clearTimeout(intval);
      }
      //that.set_video_height()
      i++;
    }, 1000);
  },
  created() {
    this.$store.dispatch("get_invite_state");
    let that = this;
    this.intval = setInterval(function () {
      that.$store.dispatch("get_countdown_text");
    }, 1000);
  },
  methods: {
    /*       set_video_height: function () {
        let video_width = this.$refs.video.clientWidth
        let video_height = 480 / 720 * video_width;
        this.$refs.video.height = video_height
      } */
  },
  beforeDestroy() {
    clearInterval(this.intval);
  },
};
</script>


<style scoped>
.index {
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.video {
  display: block !important;
  width: 80%;
  position: absolute;
  border-radius: 5%;
  bottom: 12rem;
}

.invite-index {
  background: #d24953 no-repeat center;
  background-size: auto 100%;
  height: 100%;
  width: 100%;
  position: fixed;
  margin: 0 auto;
}
.invite-index > div {
  text-align: center;
  position: relative;
  margin: 0 auto;
}
.invite-index img {
  width: 100%;
  height: auto;
}
.invite-index > div:first-child {
  margin-top: 3rem;
  width: 25rem;
}
.invite-index > div:nth-child(2) {
  margin-top: 4rem;
  width: 10rem;
}
.invite-index > div:nth-child(3) {
  margin-top: 8rem;
  width: 8rem;
}
.invite-index > div:nth-child(4) {
  width: 60%;
  margin: 0.5rem auto;
  background: #ffe3e7;
  display: flex;
  display: -webkit-flex;
  align-content: center;
  justify-content: center;
  border-radius: 1rem;
  opacity: 0.9;
  flex-wrap: wrap;
}
.invite-index > div:nth-child(4) img {
  width: 3.3rem;
  height: 3.3rem;
  position: absolute;
  top: -1.65rem;
}
.name {
  margin: 0.5rem 0;
}
.name span {
  font-size: 1.8rem;
  padding: 0 1.65rem;
  color: #de5b52;
}
.countdown {
  width: 100%;
  font-size: 1.2rem;
  padding: 0.2rem 0;
  color: #de5b52;
}
.reply {
  font-size: 1.1rem;
  color: #dc7872;
  padding: 0.5rem;
  padding-bottom: 1rem;
}
.reply_button {
  z-index: 999;
  margin-top: 8% !important;
}
</style>
